<template>
  <div class="execute-dialog">
    <el-dialog :visible.sync="dialogVisible" :before-close="handleClose" width="650px">
      <div class="title" slot="title">执行划扣</div>
      <div class="execute-body">
        <div class="user-info">
          <div class="line">
            <div class="line-title">持卡人姓名</div>
            <div class="line-content" >
              <el-input placeholder="请选择" v-model="executeData.name" :disabled="true"/>
            </div>
            <div style="visibility: hidden"><i class="el-icon-user-solid"></i></div>
          </div>
          <div class="line">
            <div class="line-title">执行人</div>
            <div class="line-content">
              <el-input placeholder="请选择" v-model="execContent.memberUser.name" :disabled="true"/>
            </div>
            <div style="cursor: pointer" @click="getDoctors"><i class="el-icon-user-solid"></i></div>
          </div>
          <div class="line">
            <div class="line-title">执行效果</div>
            <div class="line-content">
              <el-input type="textarea" placeholder="请输入" v-model="execContent.executeResult"/>
            </div>
            <div style="visibility: hidden"><i class="el-icon-user-solid"></i></div>
          </div>
        </div>
        <div class="project-table">
          <el-table :data="actuation" style="width: 100%;box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.04);">
            <el-table-column type="index" label="序号"/>
            <el-table-column prop="desc" label=" 项目名称"></el-table-column>
            <el-table-column prop="num" label="本次执行"></el-table-column>
            <el-table-column prop="ratio" label="已执行/总数"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="btn">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
    <doctors-dialog ref="doctorsDialog" @doctorPages="getDoctors"
                    @selectDoctor="getDoctor"
                    :doctors="doctorsData"/>
  </div>
</template>

<script>
import DoctorsDialog from '@/views/actuation/dialog/doctorsDialog'
export default {
  name: 'executeDialog',
  components: { DoctorsDialog },
  props: {
    executeData: {
      type: Object
    }
  },
  data () {
    return {
      dialogVisible: false,
      actuation: [{ id: 1, desc: '有氧塑身', num: 1, ratio: '1/10' }],
      execContent: { memberUser: {}, doctor: '', executeResult: '' },
      doctorsData: { data: [], count: 16 }
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
    },
    getDoctor (doctor) {
      this.execContent.memberUser = doctor
    },
    getDoctors (pageTerms) {
      pageTerms = pageTerms || { pageNo: 1, pageSize: 5 }
      this.doctorsData.data = [
        { id: 1, name: '李1' }, { id: 1, name: '李2' }, { id: 1, name: '李3' },
        { id: 1, name: '李6' }, { id: 1, name: '李5' }
      ]
      this.$refs.doctorsDialog.show()
    },
    handleClose () {
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables";
.execute-dialog {
  font-size: 14px;
  .title {
    border-bottom: 1px solid #e5e1e1;
    padding-bottom: 10px;
    font-weight: bold;
    font-size: 16px;
  }
  .execute-body {
    margin-top: -40px;
    .user-info{
      .line {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        .line-title{
          width: 70px;
          text-align: right;
        }
        .line-content{
          display:flex;
          align-items: center;
          margin-left: 10px;
          width: 240px;
        }
        i {
          margin-left: 10px;
          font-size: 20px;
          color: $mainBg;
        }
      }
    }
    .project-table{
      margin: 30px;
    }
  }
  .btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
